<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
</head>
<body>
<div class="ui container">
    <div class="ui top aligned teal segment">
            <p class="ui center aligned attached">CRUD</p>
        </div>
<form class="ui form" th:action="@{/loginChecked}" method="get">
    <div class="field">
            <label>用户名</label>
            <input type="text" name="username" placeholder="username">
        </div>
    <div class="field">
            <label>密码</label>
            <input type="text" name="password" placeholder="password">
        </div>
    <div class="field">
            <div class="ui checkbox">
                    <input type="checkbox" tabindex="0" class="hidden">
                    <label>我同意本条款和条件</label>
                </div>
        </div>
    <button class="ui teal button" type="submit">lOAD</button>
    <div class="ui error message"></div>
</form>
    </div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>

<script>
        $('.ui.form').form({
            fields : {
                username : {
                    identifier: 'username',
                    rules: [{
                        type : 'empty',
                        prompt: '请输入用户名'
                    }]
                },
                password : {
                    identifier: 'password',
                    rules: [{
                        type : 'empty',
                        prompt: '请输入密码'
                    }]
                }
            }
        });
    </script>
</body>
</html>